<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>

<div class="webApp-content">
    <!--内容区start-->
        <div class="contect-tap"><img src="../../images/router/ic_navigation_one.png" alt=""></div>
        <div class="ly-pppoe">
            <ul>
                <li>
                    <i>WiFi网络</i>
                    <div class="select">
                        <input type="text" readonly="readonly" placeholder='请选择WiFI网络'><span id="chose-wifi"></span>
                        <ul class="name-list" style="display:none;">
                            <li>123124123@gd.163</li>
                            <li>123124123@gd.164</li>
                            <li>123124123@gd.165</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <i>WiFi密码</i>
                    <span><input type="password" placeholder='请输入WiFi密码'></span>
                </li>
            </ul>
        </div>
        <div class="ly-tip"><i></i><span>请选择WiFi网络！</span></div>
        <div class="com_btn"><a href="#">连接</a></div>
    <!--内容区end-->
</div>

<script type="text/javascript" data-main="" src="../../common/js/lib/require-min.js"></script>
<script type="text/javascript" src="../../common/js/lib/zepto.min.js"></script>
<script type="text/javascript">
    chose_wifi();
    function chose_wifi () {
        $('#chose-wifi').on('click', function(event) {
            console.log(111)
            $(this).toggleClass('darkgreay_b');
            if ($(this).hasClass('darkgreay_b')) {
                $(this).siblings('.name-list').show();
            }
            else{
                $(this).siblings('.name-list').hide();
            }
            

        });
        $('.select li').on('click', function(event) {
            $('.select input').val($(this).text());
            $(this).addClass('chosed').siblings('li').removeClass('chosed');            
			$(this).parents('.name-list').hide();
			$(this).parent().prev().removeClass('darkgreay_b');
        });
    }
</script>
<!--加载提示-->
<div class="ui-loading-block">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div>
</body>
</html>
